<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户信息管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">用户信息后台系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs"><a href="">日志系统</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">第三方服务系统</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">计费系统</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">扩展组件</a>
                <dl class="layui-nav-child">
                    <dd><a href="">云服务支撑</a></dd>
                    <dd><a href="">短信业务</a></dd>
                    <dd><a href="">邮件业务</a></dd>
                </dl>
            </li>


        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                         class="layui-nav-img" id="myHeader">
                    <span id="myName">测试账户</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="../info.html">个人信息</a></dd>
                    <dd><a href="">设置</a></dd>
                    <dd><a href="../login.html" id="logout">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd class="layui-this"><a href="user.html">账户管理</a></dd>
                        <dd><a href="department.html">部门管理</a></dd>
                        <dd><a href="auth.html">权限管理</a></dd>
                        <dd><a href="weather.html">天气信息</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">商品管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">规格管理</a></dd>
                        <dd><a href="javascript:;">参数管理</a></dd>
                        <dd><a href="">商品名称管理</a></dd>
                        <dd><a href="">商品信息管理</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <span class="layui-breadcrumb">
              <a href="../index.html">首页</a>
              <a><cite>用户管理</cite></a>
              <a><cite>账户管理</cite></a>
            </span>

            <hr class="layui-bg-blue">

            <!-- 搜索条件 -->
            <fieldset class="layui-elem-field">
                <legend>筛选条件</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">   <!--  每一个这样的div代表一个面板状态 每一个面板会自动换行 -->
                        <label class="layui-form-label">账户名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="search_username" placeholder="模糊查询账户" class="layui-input">
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                            <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                        </div>
                    </div>
                </div>
            </fieldset>

            <table class="layui-hide" id="test" lay-filter="test"></table>

            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="inser_user">新增用户</button>
                    <button class="layui-btn layui-btn-sm" lay-event="download_user">批量下载</button>
                </div>
            </script>
            <script type="text/html" id="switchTpl">
                <!-- 这里的 checked 的状态只是演示 -->
                <input type="checkbox" name="action" value="{{d.id}}" lay-skin="switch" lay-text="可用|禁用" lay-filter="actionDemo" {{ d.action == 1 ? 'checked' : '' }}>
            </script>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="update">更新</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

            <script type="text/html" id="insert_form">   <!-- script type="text/html"  这样的定义代表默认为隐藏的窗口，等待js调用  -->
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_username" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_password" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">年龄</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_age" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_phone" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_email" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">身份证号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="insert_identity" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="sex" value="男" title="男">
                            <input type="radio" name="sex" value="女" title="女">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-inline">
                            <select name="quiz2" id="insert_action">
                                <option value="">选择用户状态</option>
                                <option value="1">启用</option>
                                <option value="0">停用</option>
                            </select>
                        </div>
                    </div>

                </div>
            </form>
            </script>
            <script type="text/html" id="edit_form">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-field-box">
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="edit_username" class="layui-input" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-inline">
                            <input type="text" id="edit_password" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">年龄</label>
                        <div class="layui-input-inline">
                            <input type="text" id="edit_age" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="edit_phone" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-inline">
                            <input type="text" id="edit_email" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">身份证号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="edit_identity" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-inline">
                            <input type="radio"  name="sex" value="男" title="男">
                            <input type="radio"  name="sex" value="女" title="女">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-pane">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-inline">
                            <select name="quiz2" id="edit_action">
                                <option value="">选择用户状态</option>
                                <option value="1">启用</option>
                                <option value="0">停用</option>
                            </select>
                        </div>
                    </div>

                </div>
            </form>
            </script>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域    event 事件 -->
        ©2020-2021 CopyRight Hernie www.hernie.com
    </div>
</div>
<script src="../layui/layui.js" charset="utf-8"></script>
<script src="../jquery/jquery-3.5.1.js"></script>
<script>


    $(function () {

            var user = localStorage.getItem("user")
            user = JSON.parse(user);
            $("#myHeader").attr("src", user.photoPath);
            $("#demo1").attr("src", user.photoPath);
            $("#myName").text(user.username);
        $("#iReset").click(function () {
            $("#search_username").val("");
            search();
        });

        $("#searchVal").click(function () {   // 搜索
            var username = $("#search_username").val();
            search(username);
        });

        $("#logout").click(function(){
            window.location.href="/user/logout"
        });

        search();

        function search(username) {
            layui.use(['table','form'], function () {
                var table = layui.table;
                var form = layui.form;
                var json = {};
                if (username != null && username != "") {
                    json.username = username;
                }
                table.render({   // 渲染数据

                    elem: '#test'   // 获取table的id
                    , url: '/user/selectForPage'    // 获取json数据
                    , where: json               // 添加的请求查询参数
                    , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                    , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                        title: '提示'
                        , layEvent: 'LAYTABLE_TIPS'
                        , icon: 'layui-icon-tips'
                    }]
                    , title: '用户数据表'
                    , cols: [[
                        {type: 'checkbox', fixed: 'left'}
                        , {
                            field: 'id',
                            title: 'ID',
                            width: 80,
                            fixed: 'left',
                            unresize: true,
                            sort: true,
                            templet: function (res) {
                                return '<em>' + res.id + '</em>'
                            }

                        }
                        , {
                            field: 'username', title: '用户名', width: 120, templet: function (res) {
                                return '<em>' + res.username + '</em>'
                            }
                        }
                        , {
                            field: 'phone', title: '手机号', width: 120, edit: 'text', templet: function (res) {
                                return '<em>' + res.phone + '</em>'
                            }
                        }
                        , {
                            field: 'age', title: '年龄', width: 120, edit: 'text', templet: function (res) {
                                return '<em>' + res.age + '</em>'
                            }
                        }
                        , {
                            field: 'sex', title: '性别', width: 120, edit: 'text', templet: function (res) {
                                return '<em>' + res.sex + '</em>'
                            }
                        }
                        , {
                            field: 'identity', title: '身份证', width: 180, edit: 'text', templet: function (res) {
                                return '<em>' + res.identity + '</em>'
                            }
                        }
                        , {
                            field: 'email', title: '邮箱', width: 150, edit: 'text', templet: function (res) {
                                return '<em>' + res.email + '</em>'
                            }
                        }
                        ,{field:'action', title:'状态', width:95, templet: '#switchTpl', unresize: true}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 170}
                    ]]
                    , page: true

                });

                //头工具栏事件
                table.on('toolbar(test)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    console.log(checkStatus);
                    switch (obj.event) {
                        case 'inser_user':
                            layer.open({
                                type: 1
                                , title: '新增角色'         //不显示标题栏
                                , closeBtn: false
                                , area: ['400px', '600px']  // 宽和高
                                , shade: 0.8               // 透明度
                                , id: 'LAY_layuipro'       //设定一个id，防止重复弹出
                                , btn: ['新增', '取消']    // 两个按钮显示的文字内容
                                , btnAlign: 'c'           // 居中
                                , moveType: 1             //拖拽模式，0或者1
                                , content: $('#insert_form').html()// 引入自定义表单  对指定 script标记进行调用
                                , success: function (layero) {   // 初始化操作都是放置在这里的
                                    // 手动初始化form表单样式，并刷新select渲染
                                    layui.use(['form'], function () {
                                        var form = layui.form;
                                        form.render('select');
                                    });
                                    layui.use(['form'], function () {
                                        var form = layui.form;
                                        form.render('radio');
                                    });
                                }
                                , btn1: function (index, layero) {   // 确定按钮
                                    let username = $("#insert_username").val();
                                    let password = $("#insert_password").val();
                                    let action = $("#insert_action").val();   // 在jquery中，可以直接通过val方法获取到select选中的option中的value值
                                    $.ajax({   // 异步请求   想象成线程状态
                                        url: "/user/insert",   // 请求路径
                                        type: "post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                                        contentType: "application/json;charset=utf-8",
                                        datatype: "text",
                                        // request中传递的key-value值
                                        data: JSON.stringify({
                                            username: username,
                                            password: password,
                                            action: action
                                        }),
                                        success: function (response) {                        // 后台服务响应成功，自动返回数据
                                            layer.msg(response.msg);
                                            if (response.code === 200) {
                                                layer.close(index);   // 关闭当前对话框  基于传递过来的index值进行窗口关闭
                                                search();    // 新增成功之后，需要重新渲染一下table，让用户可以看到新增的数据
                                            }
                                        },
                                        error: function (response) {             // 网络请求失败，自动调用此方法
                                            layer.msg("网络服务失败，请稍后重试!");
                                            // layer.close(index);   // 关闭当前对话框
                                        }
                                    });
                                }

                            });
                            break;
                        case 'download_user':
                            // var data = checkStatus.data;
                            layer.alert('下载数据');
                            break;

                        //自定义头工具栏右侧图标 - 提示
                        case 'LAYTABLE_TIPS':
                            layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    }
                    ;
                });

                //监听行工具事件
                table.on('tool(test)', function (obj) {
                    var data = obj.data;
                    //console.log(obj)
                    if (obj.event === 'del') {
                        layer.confirm('确认删除？', function (index) {
                            obj.del();
                            $.ajax({   // 异步请求   想象成线程状态
                                url: "/user/deleteById",   // 请求路径
                                type: "post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                                datatype: "text",
                                // request中传递的key-value值
                                data: {id: data.id},
                                success: function (response) {                        // 后台服务响应成功，自动返回数据
                                    if (response.code === 200) {
                                        layer.close(index);   // 关闭当前对话框
                                        layer.msg(response.msg);
                                        search();
                                    } else {
                                        layer.msg("删除失败，请稍后重试！");
                                    }
                                },
                                error: function (response) {             // 网络请求失败，自动调用此方法
                                    console.log("出错" + response);
                                    layer.close(index);   // 关闭当前对话框
                                }
                            });
                        });
                        layer.close(index);
                    } else if (obj.event === 'edit') {
                        layer.open({
                            type: 1
                            ,title: '更新用户'         //不显示标题栏
                            ,closeBtn: false
                            ,area: ['400px','600px']  // 宽和高
                            ,shade: 0.8               // 透明度
                            ,id: 'LAY_layuipro'       //设定一个id，防止重复弹出
                            ,btn: ['更新', '取消']    // 两个按钮显示的文字内容
                            ,btnAlign: 'c'
                            ,moveType: 1             //拖拽模式，0或者1
                            ,content: $('#edit_form').html()// 引入自定义表单
                            ,btn1: function(index, layero){
                                var username = $("#edit_username").val();
                                var password = $("#edit_password").val();
                                var age = $("#edit_age").val();
                                var phone = $("#edit_phone").val();
                                var email = $("#edit_email").val();
                                var identity = $("#edit_identity").val();
                                // var sex = $("sex").val();
                                // console.log(sex);
                                var action = $("#edit_action").val();
                                $.ajax({   // 异步请求   想象成线程状态
                                    url:"/user/updateById",   // 请求路径
                                    type:"post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                                    contentType:"application/json;charset=utf-8",
                                    datatype:"text",
                                    // request中传递的key-value值
                                    data:JSON.stringify({
                                        id:data.id,
                                        username:username,
                                        password:password,
                                        age:age,
                                        phone:phone,
                                        email:email,
                                        identity:identity,
                                        // sex:sex,
                                        action:action
                                    }),
                                    success:function(response){                        // 后台服务响应成功，自动返回数据
                                        layer.msg(response.msg);
                                        if(response.code === 200) {
                                            layer.close(index);   // 关闭当前对话框
                                            // alert("更新成功!");
                                            search();
                                        }
                                        // else {
                                        //     alert("更新失败，请稍后重试!");
                                        // }
                                    },
                                    error:function(response){             // 网络请求失败，自动调用此方法
                                        console.log("出错" + response);
                                        layer.close(index);   // 关闭当前对话框
                                    }
                                });
                                // 关闭弹出框
                                layer.close(index);
                            }
                            ,success: function(layero){
                                $("#edit_username").val(data.username);
                                $("#edit_password").val(data.password);
                                $("#edit_age").val(data.age);
                                $("#edit_phone").val(data.phone);
                                $("#edit_email").val(data.email);
                                $("#edit_identity").val(data.identity);
                                // $("sex").val(data.sex);
                                $("#edit_action").val(data.action);


                                form.render('select');
                                form.render('radio');
                            }
                        });
                    }

                });
                form.on('switch(actionDemo)', function(obj){
                    var id = this.value;
                    var action = obj.elem.checked ? '1':'0';
                    console.log(id);
                    console.log(action);
                    // layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
                    $.ajax({   // 异步请求   想象成线程状态
                        url: "/user/updateById",   // 请求路径
                        type: "post",               // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
                        contentType: "application/json;charset=utf-8",
                        datatype: "text",

                        // request中传递的key-value值
                        data: JSON.stringify({
                            id:id,
                            action:action
                        }),
                        success: function (response) {                        // 后台服务响应成功，自动返回数据
                            layer.msg(response.msg);
                        },
                        error: function (response) {             // 网络请求失败，自动调用此方法
                            // console.log("出错" + response);
                            layer.msg("服务器出错，请稍后重试！");
                            // layer.close(index);   // 关闭当前对话框
                        }
                    });
                });
            });

        }
    });


    //JS
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            , menuRight: function () {
                layer.open({
                    type: 1
                    , title: '更多'
                    , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    , area: ['260px', '100%']
                    , offset: 'rt' //右上角
                    , anim: 5
                    , shadeClose: true
                    , scrollbar: false
                });
            }
        });

    });
</script>
</body>
</html>
